<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1">

			<gui-page-loading ref="guipageloading">
				<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
				<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
					style="padding-top:10rpx;">loading</text>
			</gui-page-loading>

			<gui-empty v-if="msgs.length==0">
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="gui-empty-img" :src="empty_img">
					</image>
				</view>
				<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top">暂无数据</text>
			</gui-empty>

			<view class="gui-margin-top">
				<gui-slide-list :msgs="msgs" @itemTap="itemTap" :height="mainHeight" @btnTap="btnTap"></gui-slide-list>
			</view>
		</view>
	</gui-page>
</template>
<script>
	// 模拟个 api 请求的数据
	
	var msgsFromApi = [];
	var graceJS = require('@/GraceUI5/js/grace.js');
	export default {
		data() {
			return {
				msgs: [],
				// 核心区域高度 
				mainHeight: 200,
				pageLoading: true,
				empty_img: this.empty_img
			}
		},
		onLoad: function() {
			// 01. 获取页面主体高度
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 消息主体高度 = 页面高度 - 其他页面元素高度
					this.mainHeight = e.height - uni.upx2px(120);
					this.pageLoading = false;
				});
			});
			
			this.$globalMethod();
			this.message_list();
		},
		methods: {
			message_list() {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.notice/my_notice_list', //仅为示例，并非真实接口地址。

					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;


						console.log(return_data);
						if (return_data.code == 0) {
							_this.msgs = return_data.data.list;
						}
					}
				});
			},
			btnTap: function(index, btnIndex) {
				console.log(index, btnIndex);
				// 第一个按钮被点击 [ 标记已读 ]
				if (btnIndex == 0) {
					if (this.msgs[index].btns[0].name == '标为已读') {
						this.msgs[index].btns = [{
							'name': '标为未读',
							bgColor: '#888888'
						}, {
							'name': '删除消息',
							bgColor: '#FF0036'
						}];
						this.msgs[index].msgnumber = 0;
					} else {
						this.msgs[index].btns = [{
							'name': '标为已读',
							bgColor: '#323232'
						}, {
							'name': '删除消息',
							bgColor: '#FF0036'
						}];
						this.msgs[index].msgnumber = 1;
					}
					setTimeout(() => {
						this.msgs.splice(index, 1, this.msgs[index]);
					}, 300);
				}
				// 第二个按钮被打开 [ 删除消息 ]
				else if (btnIndex == 1) {
					uni.showModal({
						title: "确定要删除吗?",
						success: (e) => {
							if (e.confirm) {
								this.msgs.splice(index, 1);
							}
						}
					});
				}
			},
			// 列表本身被点击
			itemTap: function(e) {
				console.log(e);
				// uni.showToast({
				// 	title: "索引" + e
				// });
			}
		}
	}
</script>
<style>
</style>